import {
  Button,
  Space,
  Table,
  TableProps,
  Tag,
  App
} from "antd";
import { useState } from "react";

interface DataType {
  key: number;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const _data: DataType[] = [
  {
    key: 1,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: 2,
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['try'],
  },
  {
    key: 3,
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]

const TableApp: React.FC = () => {
  // 注意已全局 App 包裹，见 main.tsx
  const { modal, message } = App.useApp()

  const [data, setData] = useState(_data)

  const onLikeItem = async (item: DataType) => {
    // const confirmed = await modal.confirm({
    //   title: 'Like',
    //   content: 'Are you sure to like this record?',
    //   okText: 'Like',
    //   cancelText: 'Cancel',
    //   closable: true
    // })
    // if (!confirmed) return
    if (!item.tags.includes('like')) {
      item.tags.push('like')
    }
    setData(data.map(i => (i.key === item.key ? item : i)))
    message.success('Like Success!')
  }

  const onUnlikeItem = (item: DataType) => {
    if (item.tags.includes('like')) {
      item.tags = item.tags.filter(i => i !== 'like')
    }
    setData(data.map(i => (i.key === item.key ? item : i)))
    message.success('Unlike Success!')
  }

  const onDeleteItem = async (item: DataType) => {
    const confirmed = await modal.error({
      title: 'Delete',
      content: 'Are you sure to delete this record?',
      okText: 'Delete',
      cancelText: 'Cancel',
      closable: true
    })
    if (!confirmed) return
    setData(data.filter(i => i.key !== item.key))
    message.success('Delete Success!')
  }

  const columns: TableProps<DataType>['columns'] = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: 'Tags',
      dataIndex: 'tags',
      key: 'tags',
      render: (_, { tags }) => (
        <>
          {
            tags.map(tag => {
              const color = tag === 'try'
                ? 'volcano'
                : tag.length > 4
                  ? 'geekblue'
                  : 'green'
              return (
                <Tag color={color} key={tag}>
                  {tag.toUpperCase()}
                </Tag>
              )
            })
          }
        </>
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: item => {
        const isLike = item.tags.includes('like')
        return (
          <Space size="middle">
            {
              isLike
                ? <Button
                    type="link"
                    disabled={!isLike}
                    onClick={() => onUnlikeItem(item)}
                  >Unlike</Button>
                : <Button
                    type="link"
                    disabled={isLike}
                    onClick={() => onLikeItem(item)}
                  >Like</Button>
            }
            <Button
              type="link"
              danger
              onClick={() => onDeleteItem(item)}
            >Delete</Button>
          </Space>
        )
      }
    }
  ]

  return <Table columns={columns} dataSource={data} />
}

export default TableApp
